<!-- 待办任务-来料委外质检组件 -->
<script lang="ts">
import { reactive, ref, nextTick, watch } from "vue";
import {
  addQiTaskOutRecord,
  queryQualityByQiTaskId,
  getQiTaskById
} from "/@/api/quality/mission";
import { ElForm } from "element-plus";
import { queryDetailById } from "/@/api/quality/badContent";
import { successMessage, errorMessage, alertMessage } from "/@/utils/message";
import imgViewer from "/@/components/imgViewer/index.vue";
export default {
  name: "outsourceTest",
  components: { imgViewer },
  props: {
    dialogShow: {
      type: Boolean,
      default: false
    },
    qiTaskId: {
      type: Number,
      default: 0
    }
  },
  setup(props, ctx) {
    const testData = reactive({
      submitLoading: false,
      dialogShow: false,
      badDetails: [] as any[],
      qiTaskId: 0,
      formData: {} as any, //表单数据
      fileList: [] as any[], //上传的图片
      qualityFiles: [] as any[], // 通过bomCode查询出来的质检文件
      qualityItems: [] as any[] // 通过bomCode查询出来的质检信息
    });
    watch(props, n => {
      console.log(props);
      testData.dialogShow = n.dialogShow;
      if (testData.dialogShow) {
        testData.qiTaskId = n.qiTaskId;
        testingEvent();
      }
    });
    //质检点击事件
    const testingEvent = () => {
      //qiType == 2来料
      //qiType == 3委外
      // 通过id查质检详情
      getQiTaskById(testData.qiTaskId)
        .then((res: any) => {
          if (res.code === 0) {
            testData.formData = res.data;
            testData.formData.qualityStatus = 1;
            testData.formData.qualityNum = 0;
            testData.formData.qualityUnNum = 0;
            testData.formData.fileList = [];
          }
        })
        .catch((err: any) => {
          console.log(err);
          errorMessage("查询失败");
        });
      //通过bomCode查询质检信息
      queryQualityByQiTaskId(testData.qiTaskId).then((res: any) => {
        if (res.code == 0) {
          console.log(res);
          testData.qualityFiles = res.data && res.data.qualityFiles;
          testData.qualityItems = res.data && res.data.qualityItems;
          if (res.data.qualityItems) {
            for (let i = 0; i < testData.qualityItems.length; i++) {
              testData.qualityItems[i].recordValue = "";
            }
          }
        }
      });
      //通过质检单ID查询不良品信息
      queryDetailById(testData.qiTaskId).then((res: any) => {
        if (res.code === 0) {
          testData.badDetails = res.data;
          for (let i = 0; i < testData.badDetails.length; i++) {
            testData.badDetails[i].badContentRecord = "";
          }
        }
      });
    };
    const insertForm = ref<InstanceType<typeof ElForm>>();

    // 委外质检提交
    const submitEvent = () => {
      var qualityNum = testData.formData.qualityNum;
      var qualityUnNum = testData.formData.qualityUnNum;
      if (qualityNum + qualityUnNum != testData.formData.checkQuantity) {
        alertMessage(
          "【报检数量】与【合格数+不合格数】总和不一致，请核对",
          "提示"
        );
        return false;
      }
      if (testData.formData.qualityUnNum > 0) {
        testData.formData.qualityStatus = 2;
      }
      var formList = new FormData();
      if (testData.fileList.length) {
        for (const i in testData.fileList) {
          formList.append("files", testData.fileList[i]); // 'file'可变相当于input表单的name属性
        }
      }
      testData.submitLoading = true;
      testData.qualityItems.forEach((item, index) => {
        formList.append(`qiTaskCustSxList[${index}].qualityId`, item.qualityId);
      });
      testData.qualityItems.forEach((item, index) => {
        formList.append(
          `qiTaskCustSxList[${index}].qualityItemId`,
          item.qualityItemId
        );
      });
      testData.qualityItems.forEach((item, index) => {
        formList.append(`qiTaskCustSxList[${index}].qiRemark`, item.qiRemark);
      });
      testData.qualityItems.forEach((item, index) => {
        formList.append(
          `qiTaskCustSxList[${index}].recordValue`,
          item.recordValue
        );
      });
      testData.qualityItems.forEach((item, index) => {
        formList.append(
          `qiTaskCustSxList[${index}].measureTools`,
          item.qualityItemMeasureTools
        );
      });
      testData.qualityItems.forEach((item, index) => {
        formList.append(
          `qiTaskCustSxList[${index}].name`,
          item.qualityItemName
        );
      });
      testData.qualityItems.forEach((item, index) => {
        formList.append(
          `qiTaskCustSxList[${index}].specificity`,
          item.qualityItemSpecificity
        );
      });
      testData.qualityItems.forEach((item, index) => {
        formList.append(
          `qiTaskCustSxList[${index}].standard`,
          item.qualityItemStandard
        );
      });
      testData.badDetails.forEach((item, index) => {
        formList.append(
          `qiBadContentRedDtoList[${index}].badContentId`,
          item.id
        );
      });
      testData.badDetails.forEach((item, index) => {
        formList.append(
          `qiBadContentRedDtoList[${index}].badContentRecord`,
          item.badContentRecord
        );
      });
      formList.append("qiTaskId", testData.qiTaskId.toString());
      for (const i in testData.formData) {
        if (i !== "outsourceDetails" && i != "id") {
          formList.append(i, testData.formData[i]);
        }
      }
      console.log(formList);
      addQiTaskOutRecord(formList)
        .then((res: any) => {
          if (res.code == 0) {
            successMessage("质检成功");
            ctx.emit("searchEvent");
            outsourceClose();
          } else {
            errorMessage("质检失败");
          }
          testData.submitLoading = false;
        })
        .catch((err: any) => {
          errorMessage(err.message);
          testData.submitLoading = false;
        });
    };
    /** 文件状态改变时调用 */
    const changeFile = event => {
      console.log(event);
      testData.fileList = [];
      for (let i = 0; i < event.length; i++) {
        //ready为本次上传的图片，success为已经上传的图片
        if (event[i].status == "ready") {
          testData.fileList.push(event[i].raw);
        }
      }
    };
    // 来料委外取消
    const outsourceClose = () => {
      testData.badDetails = [] as any[];
      testData.qiTaskId = 0;
      testData.formData = {} as any; //表单数据
      testData.qualityFiles = [] as any[]; // 通过bomCode查询出来的质检文件
      testData.qualityItems = [] as any[]; // 通过bomCode查询出来的质检信息
      nextTick(() => {
        testData.dialogShow = false;
        testData.fileList = [];
      });
      ctx.emit("outsourceTestClose");
    };
    return {
      testData,
      insertForm,
      changeFile,
      submitEvent,
      outsourceClose
    };
  }
};
</script>
<template>
  <div>
    <!-- 来料委外质检弹框 -->
    <el-dialog
      v-model="testData.dialogShow"
      title="质检"
      width="80%"
      top="7vh"
      :loading="testData.submitLoading"
      :before-close="outsourceClose"
      :close-on-click-modal="false"
    >
      <el-form
        ref="insertForm"
        :data="testData.formData"
        label-align="right"
        label-width="100px"
      >
        <el-row :gutter="10">
          <el-col :span="8">
            <el-form-item prop="qiType" label="质检单类型">
              <el-tag
                type="success"
                v-if="testData.formData.qiType == 2"
                effect="dark"
                >来料</el-tag
              >
              <el-tag
                type="warning"
                v-if="testData.formData.qiType == 3"
                effect="dark"
                >委外</el-tag
              >
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item prop="bnoNo" label="销售单号">
              {{ testData.formData.bnoNo }}
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item prop="custName" label="客户名称">
              {{ testData.formData.custName }}
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item prop="bnoNo" label="生产订单编号">
              {{ testData.formData.bnoNo }}
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item prop="bomCode" label="料号">
              {{ testData.formData.bomCode }}
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item prop="bomName" label="品名">
              {{ testData.formData.bomName }}
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item prop="checkQuantity" label="报检数量">
              {{ testData.formData.checkQuantity }}
            </el-form-item>
          </el-col>
          <el-col :span="16"> </el-col>
          <el-col :span="8">
            <el-form-item prop="qualityStatus" label="质检状态">
              <el-radio-group
                style="width: 100%"
                v-model="testData.formData.qualityStatus"
              >
                <el-radio-button :label="1" size="mini">合格</el-radio-button>
                <el-radio-button :label="2" size="mini">不合格</el-radio-button>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item prop="qualityNum" label="合格数">
              <el-input-number
                v-model="testData.formData.qualityNum"
                size="small"
                style="width: 100%"
                :min="0"
              ></el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item prop="qualityUnNum" label="不合格数">
              <el-input-number
                size="small"
                style="width: 100%"
                v-model="testData.formData.qualityUnNum"
                :min="0"
                label="请输入不合格数"
              ></el-input-number>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-divider content-position="left">实物照片</el-divider>
      <img-viewer
        :list="testData.formData.fileList"
        @onChange="changeFile"
      ></img-viewer>
      <el-divider content-position="left">检查信息</el-divider>
      <img-viewer :list="testData.qualityFiles" :disabled="true"></img-viewer>
      <el-table
        stripe
        :data="testData.qualityItems"
        border
        fit
        size="mini"
        highlight-current-row
        tooltip-effect="dark"
      >
        <el-table-column type="index" width="50" label="序号">
        </el-table-column>
        <el-table-column label="检查项目" prop="qualityItemName">
        </el-table-column>
        <el-table-column
          label="技术要求"
          width="200"
          prop="qualityItemStandard"
        >
        </el-table-column>
        <el-table-column label="特殊性" prop="qualityItemSpecificity">
        </el-table-column>
        <el-table-column label="测量工具" prop="qualityItemMeasureTools">
        </el-table-column>
        <el-table-column
          label="记录形式"
          prop="qualityItemRecordForm"
        ></el-table-column>
        <el-table-column
          label="自检结果"
          prop="qiRemark"
          min-width="100"
        ></el-table-column>
        <el-table-column label="专检结果" width="200" prop="recordValue">
          <template #default="{ row }">
            <el-input
              v-if="row.qiTest == 1"
              v-model="row.recordValue"
              style="width: 100%"
              size="small"
              placeholder="请输入"
            ></el-input>
          </template>
        </el-table-column>
      </el-table>
      <!-- <el-divider content-position="left">不良内容</el-divider>
      <el-table
        stripe
        :data="testData.badDetails"
        border
        fit
        size="mini"
        highlight-current-row
        tooltip-effect="dark"
      >
        <el-table-column type="index" width="50" label="序号"></el-table-column>
        <el-table-column label="分类" prop="badType" width="140">
        </el-table-column>
        <el-table-column label="不良内容" prop="badContent" width="140">
        </el-table-column>
        <el-table-column label="记录结果" prop="badContentRecord">
          <template #default="scope">
            <el-input
              style="width: 100%"
              size="small"
              placeholder="请输入"
              v-model="scope.row.badContentRecord"
            ></el-input>
          </template>
        </el-table-column>
      </el-table> -->
      <template #footer>
        <el-button size="small" @click="outsourceClose">取 消</el-button>
        <el-button size="small" type="primary" @click="submitEvent"
          >确 定</el-button
        >
      </template>
    </el-dialog>
  </div>
</template>
<style scoped>
@import url("/@/style/dialog.css");
</style>
